<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
    <script type="text/javascript">
        (() => {
            window.onload = function() {
                let fn = (event) => {
                    event.preventDefault(); // 阻止事件的默认行为
                    let target = event.target || event.srcElement;
                    let previous = target.previousElementSibling;
                    console.log(previous);
                    console.log(previous.files);
                    console.log(previous.files[0].arrayBuffer());
                }
                let submits = document.querySelectorAll('input[type=submit]');
                Array.from(submits).forEach(btn => {
                    // btn.addEventListener('click', fn, false);
                });
            }
        })();
    </script>
</head>

<body>
    <!-- 当利用表单上传文件时，必须满足: -->
    <!-- 1、method 取值必须是 POST -->
    <!-- 2、enctype 取值必须是 multipart/form-data -->
    <form action="/upload/single" method="POST" enctype="multipart/form-data">
        <!-- 通常将 input:file 称作 文件域 或 文件控件 -->
        <!-- 若 input:file 没有 multiple 属性则只能选择单个文件 -->
        <input type="file" name="upfile">
        <input type="submit" value="上传">
    </form>
    <hr>
    <form action="/upload/multiple" method="POST" enctype="multipart/form-data">
        <!-- 若 input:file 有 multiple 属性则表示可以选择多个文件 -->
        <input type="file" name="upfile" multiple>
        <input type="submit" value="上传">
    </form>
</body>

</html>